// index.js
Page({
  data: {
    today: '',
    selectedDate: '',
    selectedTimeSlot: '',
    selectedVenue: '',
    selectedVenueName: '',
    selectedTimeSlotLabel: '',
    timeSlots: [
      { id: '1', label: '08:00-10:00', period: '上午' },
      { id: '2', label: '10:00-12:00', period: '上午' },
      { id: '3', label: '14:00-16:00', period: '下午' },
      { id: '4', label: '16:00-18:00', period: '下午' },
      { id: '5', label: '18:00-20:00', period: '晚上' },
      { id: '6', label: '20:00-22:00', period: '晚上' }
    ],
    venueList: [
      { id: '1', name: '生涯咨询室', area: '19.93m²' },
      { id: '2', name: '求职面试间', area: '19.93m²' },
      { id: '3', name: '多功能会议室', area: '62.40m²' },
      { id: '4', name: '智创空间', area: '41.21m²' },
      { id: '5', name: '心理辅导室', area: '19.93m²' },
      { id: '6', name: '心理咨询室', area: '19.93m²' },
      { id: '7', name: 'DIY手工坊', area: '19.93m²' },
      { id: '8', name: '智能服务中心(大厅)', area: '236.08m²' },
      { id: '9', name: '智能服务中心(小厅)', area: '120.36m²' },
      { id: '10', name: '征兵工作站', area: '120.36m²' }
    ],
    venues: [],
    availableCount: -1,
    canReserve: false,
    isLoading: false
  },

  onLoad() {
    // 设置今天的日期
    const date = new Date();
    const today = this.formatDate(date);
    this.setData({
      today: today,
      selectedDate: today
    });
  },

  formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  },

  onDateChange(e) {
    const selectedDate = e.detail.value;
    this.setData({
      selectedDate: selectedDate,
      selectedTimeSlot: '',
      selectedVenue: '',
      venues: [],
      availableCount: -1,
      canReserve: false
    });
  },

  onSelectTimeSlot(e) {
    const { selectedDate } = this.data;
    
    if (!selectedDate) {
      wx.showToast({
        title: '请先选择日期',
        icon: 'none'
      });
      return;
    }

    const id = e.currentTarget.dataset.id;
    const timeSlot = this.data.timeSlots.find(t => t.id === id);
    
    this.setData({
      selectedTimeSlot: id,
      selectedTimeSlotLabel: timeSlot.label,
      selectedVenue: '',
      selectedVenueName: '',
      canReserve: false
    });
    
    this.loadVenueStatus();
  },

  onSelectVenue(e) {
    const { selectedTimeSlot } = this.data;
    
    if (!selectedTimeSlot) {
      wx.showToast({
        title: '请先选择时间段',
        icon: 'none'
      });
      return;
    }

    const id = e.currentTarget.dataset.id;
    const status = e.currentTarget.dataset.status;
    
    if (status === 'unavailable') {
      wx.showToast({
        title: '该时段已被预约',
        icon: 'none',
        duration: 2000
      });
      return;
    }
    
    const venue = this.data.venues.find(v => v.id === id);
    
    this.setData({
      selectedVenue: id,
      selectedVenueName: venue.name,
      canReserve: true
    });
  },

  // 加载场地状态
  loadVenueStatus() {
    const { selectedDate, selectedTimeSlot } = this.data;
    
    if (!selectedDate || !selectedTimeSlot) {
      return;
    }

    this.setData({
      isLoading: true
    });

    // 模拟API调用
    // 实际接口: GET /api/venues/status?date=2025-11-06&timeSlotId=1
    
    wx.showLoading({
      title: '加载中...',
      mask: true
    });

    setTimeout(() => {
      // 模拟返回数据
      const venues = this.data.venueList.map(venue => {
        // 随机模拟30%的场地已被预约
        const isUnavailable = Math.random() > 0.7;
        return {
          ...venue,
          status: isUnavailable ? 'unavailable' : 'available'
        };
      });
      
      const availableCount = venues.filter(v => v.status === 'available').length;
      
      this.setData({
        venues: venues,
        availableCount: availableCount,
        isLoading: false
      });
      
      wx.hideLoading();
    }, 500);
  },

  onReserve() {
    const { selectedDate, selectedTimeSlot, selectedVenue, venues, selectedTimeSlotLabel } = this.data;
    
    if (!selectedDate || !selectedTimeSlot || !selectedVenue) {
      wx.showToast({
        title: '请完善预约信息',
        icon: 'none'
      });
      return;
    }

    const venue = venues.find(v => v.id === selectedVenue);
    
    wx.showModal({
      title: '确认预约',
      content: `日期：${selectedDate}\n时间：${selectedTimeSlotLabel}\n场地：${venue.name} (${venue.area})`,
      confirmText: '确认',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          this.submitReservation();
        }
      }
    });
  },

  // 提交预约
  submitReservation() {
    const { selectedDate, selectedTimeSlot, selectedVenue } = this.data;
    
    // 模拟API调用
    // 实际接口: POST /api/reservations
    // 请求体: { date: '2025-11-06', timeSlotId: '1', venueId: '1' }
    
    wx.showLoading({
      title: '预约中...',
      mask: true
    });

    setTimeout(() => {
      wx.hideLoading();
      
      wx.showToast({
        title: '预约成功',
        icon: 'success',
        duration: 2000
      });
      
      // 延迟重置，让用户看到成功提示
      setTimeout(() => {
        this.setData({
          selectedTimeSlot: '',
          selectedVenue: '',
          selectedVenueName: '',
          selectedTimeSlotLabel: '',
          venues: [],
          availableCount: -1,
          canReserve: false
        });
      }, 2000);
      
    }, 1000);
  }
});
